var myChart = echarts.init(document.getElementById('main'));
var myChart2 = echarts.init(document.getElementById('main2'));

var option = {
    
    // color: ["#60C8FF", "#fd1c54", "#E5DD00"],
    title: {
        text: '',
        subtext: '',
        left: 'center'
    },
    tooltip: {
        // trigger: '{item}',
        formatter: '{b}({d}%)'
    },
    legend: {
        orient: 'vertical',
        // x: 'right',
        y: 'center',
        right: '7%',
        itemWidth: 13,
        itemHeight: 13,
        textStyle: {
            color: '#C5E2FF'
        },
        itemGap: 10,
        data: [
            '人口',
            '法人',
            '空间地理',
            '宏观经济',
            '公共安全',
            '人居环境',
            '经济运行',
            '民生幸福',
            '政务服务',
            '党建服务'
        ]
    },
    series: [{
        name: '',
        type: 'pie',
        radius: ['43%', "60%"],
        center: ['40%', '50%'],
        data: [{
                value: 100,
                name: '人口'
            },
            {
                value: 310,
                name: '法人'
            },
            {
                value: 234,
                name: '空间地理'
            },
            {
                value: 135,
                name: '宏观经济'
            },
            {
                value: 148,
                name: '公共安全'
            },
            {
                value: 135,
                name: '人居环境'
            },
            {
                value: 135,
                name: '经济运行'
            },
            {
                value: 135,
                name: '民生幸福'
            },
            {
                value: 135,
                name: '政务服务'
            },
            {
                value: 135,
                name: '党建服务'
            }
        ],
        itemStyle: {
            // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
            // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                // shadowColor: 'rgba(30, 144, 255，0.5)'
            }
        },

        // 设置值域的那指向线
        labelLine: {
            normal: {
                show: true // show设置线是否显示，默认为true，可选值：true ¦ false
            }
        },

        // 设置值域的标签
        label: {
            normal: {
                position: 'outer', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
                // {a}指series.name  {b}指series.data的name
                // {c}指series.data的value  {d}%指这一部分占总数的百分比
                formatter: '{d}%'
            }
        }
    }],
    color: ['rgb(203,155,255)', 'rgb(149,162,5)', 'rgb(58,16,255)',
        'rgb(119,168,249)', 'rgb(235,61,59)', 'rgb(25,61,159)', 'rgb(23,155,255)', 'rgb(149,162,255)', 'rgb(58,186,255)',
        'rgb(19,168,249)'
    ]
};








// 
// 
// 
// 
// 
var option2 = {
    title: {
        text: '',
        subtext: '',
        x: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: "<br/>{b}<br/>({d}%)"
    },
    // legend: {
    //     orient: 'vertical',
    //     left: '70%', //图例距离左的距离
    //     y: 'center', //图例上下居中
    //     data: ["甘肃", "兰州", "济南", "上海", "徐州"]
    // },
    color: ['rgb(203,155,255)', 'rgb(149,162,255)', 'rgb(58,186,255)',
        'rgb(119,168,249)', 'rgb(235,161,159)', 'rgb(235,61,159)'
    ], //五个数据，五个颜色
    series: [{
        name: '',
        type: 'pie',
        radius: '60%', //图的大小
        center: ['50%', '50%'], //图的位置，距离左跟上的位置
        data: [{
                name: "年",
                value: '10'
            },
            {
                name: "季度",
                value: '8'
            },
            {
                name: "月",
                value: '9'
            },
            {
                name: "周",
                value: '5'
            },
            {
                name: "日",
                value: '6'
            },
            {
                name: "实时",
                value: '6'
            }
        ],
        // 设置值域的标签
        label: {
            normal: {
                position: 'outer', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
                // {a}指series.name  {b}指series.data的name
                // {c}指series.data的value  {d}%指这一部分占总数的百分比
                formatter: '{b}\n\n{d}%'
            }
        }
    }],

}

myChart.setOption(option);
myChart2.setOption(option2);